<template>
  <page-header-wrapper :title="false">
    <a-card title="我的排班">
      <a-row :gutter="1">
        <a-col :span="12">
          <a-card :bordered="false">
            <FullCalendar
              ref="fullCalendar"
              defaultView="dayGridMonth"
              locale="zh-cn"
              :buttonText="buttonText"
              :plugins="calendarPlugins"
              :events="eventData"
              @dateClick="handleEventClick"
            />
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card>
            <div class="holiday-list">
              <h4>本月请假详情</h4>
              <div class="data-list">
                <div class="data-list-item">
                  <div class="data-list-item-title">调休3号换5号</div>
                  <div class="data-list-item-tag">
                    <a-button size="small" type="primary" ghost @click="upl">销假</a-button>
                  </div>
                </div>
                <div class="data-list-item">
                  <div class="data-list-item-title">请假23号</div>
                  <div class="data-list-item-tag">
                    <a-button size="small" type="primary" ghost @click="upl">销假</a-button>
                  </div>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <a-modal
      centered
      title="调休请假"
      v-model="visible"
      :footer="null"
    >
      <a-tabs type="card" default-active-key="1" tab-position="left">
        <a-tab-pane key="1" tab="调休">
          <a-row>
            <a-col :span="24">
              本月有一次调休
              <p></p>
            </a-col>
            <a-col :span="24">
              已选择休息日期 2020-07-16
              <p></p>
            </a-col>
            <a-col :span="24">
              <span>调休时间</span><a-date-picker style="width:140px;margin-left:10px;" />
              <p></p>
            </a-col>
            <a-col :span="24">
              注：本月正常5、12、19、26休
              <p></p>
            </a-col>
            <a-col :span="24" :style="{ textAlign: 'right' }">
              <a-button type="primary">提交调休申请</a-button>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="请假">
          <a-row :gutter="[0,15]">
            <a-col :span="24">
              选择请假种类<br>
              <a-select placeholder="选择请假种类" style="width: 100%;margin: 5px 0;">
                <a-select-option value="1">病假</a-select-option>
                <a-select-option value="2">事假</a-select-option>
                <a-select-option value="3">婚嫁</a-select-option>
                <a-select-option value="4">产假</a-select-option>
                <a-select-option value="5">丧假</a-select-option>
                <a-select-option value="6">哺乳假</a-select-option>
              </a-select>
              假日说明：需提供医疗证明
            </a-col>
            <a-col :span="24">
              已选择休息日期 2020-07-16
            </a-col>
            <a-col :span="24">
              上班日期<br>
              <a-date-picker style="width:100%" />
            </a-col>
            <a-col :span="24">
              是否使用年假（当前剩余年假5天）
              <a-radio-group name="radioGroup" :default-value="1">
                <a-radio :value="1">
                  是
                </a-radio>
                <a-radio :value="2">
                  否
                </a-radio>
              </a-radio-group>
            </a-col>
            <a-col :span="24">
              请假日期 2020-07-16 上班日期 2020-07-20
            </a-col>
            <a-col :span="24" :style="{ textAlign: 'right' }">
              <a-button type="primary">提交请假申请</a-button>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="3" tab="上班">
          <a-row :gutter="[0,15]">
            <a-col :span="24">
              提示：申请上班当天的基础工作内容请务必完成，上班时长将纳入年底的优秀员工考核
            </a-col>
            <a-col :span="24">
              注：本月正常休5、12、19、26日
            </a-col>
            <a-col :span="24">
              已选择上班日期 2020-07-12
            </a-col>
            <a-col :span="24" :style="{ textAlign: 'right' }">
              <a-button type="primary">提交上班申请</a-button>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <a-modal
      centered
      v-model="uplVisible"
      :footer="null"
      width="300px"
    >
      <p>是否销假</p>
      <p>
        上传请假单/调休单
        <a-upload>
          <a-button type="primary"> 选择文件 </a-button>
        </a-upload>
      </p>
      <a-button type="primary" @click="handleUpload">上传</a-button>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import interactionPlugin from '@fullcalendar/interaction'

  export default {
    components: {
      FullCalendar
    },
    name: 'MySchedule',
    data () {
      return {
        layout: 'horizontal',
        txForm: {},
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '天'
        },
        calendarPlugins: [ // plugins must be defined in the JS
          dayGridPlugin,
          interactionPlugin // needed for dateClick
        ],
        eventData: [
          {
            title: '请假', // 事件内容
            start: '2020-08-11', // 事件开始时间
            end: '2020-08-19', // 事件结束时间
            cssClass: 'red' // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
          }
        ],
        visible: false,
        uplVisible: false
      }
    },
    created () {},
    methods: {
      upl () {
        this.uplVisible = true
      },
      handleEventClick (info) {
        this.visible = true
        console.log(info)
      },
      handleUpload () {
        this.uplVisible = false
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';
  @import '~@fullcalendar/timegrid/main.css';
  .holiday-list {
    padding: 0 10px;
  }
  .holiday-list h4 {
    text-align:center;
    margin-bottom: 20px;
  }
  .data-list .data-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
</style>
